<template>
    <el-dialog v-model="isShowDialog" :width="800" draggable=""  >
        <div>
            <div>
                <button v-for="(tab, index) in state.tabs" :key="index" :class="{ 'active': state.activeIndex === index }"
                    @click="state.activeIndex = index">
                    {{ tab }}
                </button>
            </div>
            <div>
                <div v-for="(content, index) in state.tabContents" :key="index" v-show="state.activeIndex === index">
                    {{ content }}
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, onMounted,reactive } from 'vue';
const openpage = () => {
    isShowDialog.value = true;
}
const isShowDialog = ref();
const state = reactive({
    tabs: [],
    tabContents: [],
    activeIndex: 0,
});
// 页面加载时
onMounted(async () => {

    state.tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
    state.tabContents = ['Content 1', 'Content 2', 'Content 3'];
    state.activeIndex = 0;

});

defineExpose({ openpage });
</script>

<style>
button.active {
    background-color: #f0f0f0;
}
</style>